<!DOCTYPE html >
<html lang="zh">
<head>
<title>产品详情</title>

  <{include file="public/header" /}>
  <style>
    .comment-list{
      height: 100%;
    }
  </style>
</head>
<body ontouchstart>
<!--主体-->
<div class="weui-content">
  <!--产品详情-->
  <div class="weui-tab">
    <div class="weui-navbar" style="position:fixed; top:0; left:0; right:0; height:44px;">
      <a class="weui-navbar__item proinfo-tab-tit weui-bar__item--on" href="#tab1">商品</a>
      <a class="weui-navbar__item proinfo-tab-tit" href="#tab2">详情</a>
      <a class="weui-navbar__item proinfo-tab-tit" href="#tab3">评价</a>
    </div>
    <div class="weui-tab__bd proinfo-tab-con">
      <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
        <!--主图轮播-->
        <div class="goodsinfo" style="display: none">
          <div class="swiper-container swiper-zhutu">
            <div class="swiper-wrapper banner-item">

            </div>
            <div class="swiper-pagination swiper-zhutu-pagination"></div>
          </div>
          <div class="wy-media-box-nomg weui-media-box_text">
            <h4 class="wy-media-box__title goods-title"></h4>
            <div class="wy-pro-pri mg-tb-5">¥<em class="num font-20 goods-price" ></em></div>
            <p class="weui-media-box__desc goods-desc"></p>
          </div>
        </div>


        <div class="wy-Module goods-list" style="display: none">
          <div class="wy-Module-tit-line"><span>看了又看</span></div>
          <div class="wy-Module-con">
            <ul class="wy-pro-list clear"></ul>
          </div>
        </div>
        <!--<div class="to_top" style="display: none">
          <img src="/static/mall/images/icon_to_top.png" alt="返回顶部" style="max-width: 100%" >
        </div>-->


      </div>
      <div id="tab2" class="weui-tab__bd-item ">
        <div class="pro-detail">
        </div>
      </div>
      <div id="tab3" class="weui-tab__bd-item comment-box">
        <!--评价-->
        <div class="weui-panel__bd comment-list">
        </div>

        <a href="<{:url('comment_list')}>" class="weui-cell weui-cell_access weui-cell_link comment-list-more list-more">
          <div class="weui-cell__bd">查看更多</div>
          <span class="weui-cell__ft"></span>
        </a>

      </div>
    </div>
    <div class="to_top" style="display: none">
      <img src="/static/mall/images/icon_to_top.png" alt="返回顶部" style="max-width: 100%" >
    </div>
  </div>  
</div>
<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu">
  <a href="<{:url('/mall/home/index',['status'=>''])}>" class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-home"></div>
    <p class="weui-tabbar__label">首页</p>
  </a>
  <a href="javascript:;" id='favorite' class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-collection "></div>
    <p class="weui-tabbar__label">收藏</p>
  </a>
  <a href="<{:url('/mall/goods/cart')}>" class="promotion-foot-menu-items nav-cart">
    <span class="weui-badge cart-num"  style="position: absolute;top: -.4em;right: 1em;display: none"></span>
    <div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
    <p class="weui-tabbar__label">购物车</p>
  </a>
  <a href="javascript:;" class="weui-tabbar__item yellow-color open-popup add-cart" >
    <p class="promotion-foot-menu-label">加入购物车</p>
  </a>
  <a href="javascript:toPay()" class="weui-tabbar__item red-color buy-now" >
    <p class="promotion-foot-menu-label">立即购买</p>
  </a>
</div>


<{include file="public/footer" /}>
<script src="/static/mall/js/swiper.js"></script>


<script>
  function shop_config() {
    var shop_config = JSON.parse(localStorage.getItem('config_shop'));
    if (shop_config && shop_config.shop_type !== 'undefined'){
      var shop_type=shop_config.shop_type;
      if (shop_type==1){        //展示
        $(".nav-cart,.add-cart,.buy-now").hide();
        $(".wy-foot-menu").append('<a href="tel:'+shop_config.shop_tel+'" class="weui-tabbar__item yellow-color " >\n' +
                '    <p class="promotion-foot-menu-label">联系店家'+shop_config.shop_tel+'</p>\n' +
                '  </a>');
      }else if(shop_type==2){
        //自提
      }else if(shop_type==3){
        //虚拟
      }
    }
  }
  shop_config();

  var id = bs_get_param('id');
  function toPay(){
    location.href="<{:url('/mall/order/info')}>?id="+id;
  }
  //推荐
  goods_list()
  function goods_list(){
    var cpage = 1;
    bs_request("<{:url('/mall/goods/goods_list')}>",{page:cpage,id:id,from:'detail'},function (res) {


      if (res.code==0 && res.data.goods.length>0) {
        $(".goods-list").show();
        for (var i = 0; i < res.data.goods.length; i++) {
          $(".wy-pro-list").append('<li>\n' +
          '          <a class="goods-item" href="<{:url(\'/mall/goods/detail\')}>?id='+res.data.goods[i].id+'">\n' +
          '            <div class="proimg"><img src="'+res.data.goods[i].thumb+'" alt=""></div>\n' +
          '            <div class="protxt">\n' +
          '              <div class="name">'+res.data.goods[i].title+'</div>\n' +
          '              <div class="wy-pro-pri">¥<span>'+res.data.goods[i].price+'</span></div>\n' +
          '            </div>\n' +
          '          </a>\n' +
          '        </li>')
        }
      }

    });
  }

  // 滚动加载
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    if (scrollTop>700){
      $(".to_top").show()
    }else {
      $(".to_top").hide()
    }

  });



  $(".to_top").on('click',function () {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    document.body.offsetHeight = document.documentElement.scrollHeight = 0;
  })


  $(function () {

    bs_request("<{:url('/mall/goods/goods_detail')}>",{id:id},function (res) {

      if (res.code==0 && res.data.goods){
        $(".goodsinfo").show();
        var goods = res.data.goods;

        //主图
        if (goods.banners){
          for (var i=0;i<goods.banners.length;i++){
              $(".banner-item").append('<div class="swiper-slide"><img src="'+goods.banners[i]+'" /></div>');
          }

          $(".swiper-zhutu").swiper({
            loop: true,
            paginationType:'fraction',
            autoplay:5000
          });
        }
        $(".pro-detail").empty().html(goods.content);
        $(".goods-title").empty().html(goods.title);
        $(".goods-price").empty().html(goods.price);
        $(".goods-desc").empty().html(goods.goods_desc);
        //已收藏
        if (goods.has_favorite){
          $("#favorite").find('div').addClass('promotion-foot-menu-collection-on');
        }
      }else {
        $.toast("商品已下架",'cancel', function() {
          $(".goodsinfo").hide();
        });

      }

    });
  });
  $(document).on("click", "#favorite", function() {
        bs_request("<{:url('/mall/goods/favorite_action')}>",{id:id},function (res) {
          if (res.code != 0){
            return $.alert(res.msg);
          }
          $.toast(res.msg, function() {
            if (res.data==1){
              $("#favorite").find('div').addClass('promotion-foot-menu-collection-on')
            }else {
              $("#favorite").find('div').removeClass('promotion-foot-menu-collection-on')
            }
            console.log('close');
          });
        });




      });

      $(".add-cart").on('click',function (e){
        bs_request("<{:url('/mall/goods/my_cart_action')}>",{goods_id:id,count:1,dotype:'Increase'},function (res) {
            if (res.code==0){
              $.toast('已添加到购物车',1000)
            }
        });
      })



  bs_request("<{:url('get_comment')}>",{id:id},function (res) {
    if (res.code==0&&res.data.comment){
      for (var i=0;i<res.data.comment.length;i++){
        var item = '<div class="weui-panel__bd">\n' +
                '          <div class="wy-media-box weui-media-box_text">\n' +
                '            <div class="weui-cell nopd weui-cell_access">\n' +
                '              <div class="weui-cell__hd"><img src="'+res.data.comment[i].user.avatar+'" alt="" style="width:20px;margin-right:5px;display:block"></div>\n' +
                '              <div class="weui-cell__bd weui-cell_primary"><p>'+res.data.comment[i].user.nickname+'</p></div>\n' +
                '              <span class="weui-cell__time">'+res.data.comment[i].add_time+'</span>\n' +
                '            </div>\n' +
                '            <div class="comment-item-star"><span class="real-star comment-stars-width'+res.data.comment[i].star+'"></span></div>\n' +
                '            <p class="weui-media-box__desc">'+res.data.comment[i].content+'</p>\n' +

                '            <ul class="weui-uploader__files clear mg-com-img">\n' ;

                if (res.data.comment[i].imgs.length>0){
                  for (var j=0;j<res.data.comment[i].imgs.length;j++){
                    item+='  <li class="weui-uploader__file" style="background-image:url('+res.data.comment[i].imgs[j]+')"></li>'
                  }
                }

                item+=      '            </ul>' +
                '          </div>\n' +
                '        </div>';

        $(".comment-list").append(item);
      }
      $(".comment-list-more").attr('href',$(".comment-list-more").attr('href')+'?id='+id)
    }else {
      $('.comment-box').empty()
    }
  })
</script>

</body>
</html>
